<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">个人信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="姓名">{{
              datas?.user?.real_name
            }}</a-descriptions-item>
            <a-descriptions-item label="账号">
              {{ datas?.user?.login_name }}
            </a-descriptions-item>
            <a-descriptions-item label="绑定微信">{{}}</a-descriptions-item>
            <a-descriptions-item label="绑定日期"
              >{{
               datas?.created 
              }}</a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">资源共享</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="创建实验">{{
              datas?.teacher_experiment_count
            }}</a-descriptions-item>
            <a-descriptions-item label="共享实验">{{
            
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">班级信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="当前班级">{{
             curNumer
            }}</a-descriptions-item>
            <a-descriptions-item label="停用班级">{{
             enabledNumber
            }}</a-descriptions-item>
            <a-descriptions-item label="当前班级名称">{{classNames}}</a-descriptions-item>
            <a-descriptions-item label="学生数量">{{
             students
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
const route = useRoute();
const query = computed(() => route.query);
const curNumer = ref(0);
const enabledNumber = ref(0);
const classNames = ref();
const students= ref(0)
const datas = ref();
const getData = async () => {
  let params = {
    teacher_id: query.value.id,
  };
  const res = await api.apiTeacherFetchModelPost(params);
  datas.value = res.data;
  if(datas.value.class_list&&datas.value.class_list.length>0){
    // 当前班级数量和停用班级数量 enabled == true 启用 enabled == false 未启用
     curNumer.value = datas.value.class_list.filter(
       (item) => item.enabled == true,
     ).length;
     enabledNumber.value = datas.value.class_list.filter(
       (item) => item.enabled == false,
     ).length;
     datas.value.class_list.forEach(item=>{
        students.value += item.student_count;
        classNames.value += item.name + " ";
     })
  }
};

onMounted(async () => {
  await getData();
});
</script>
